<template>
  <div class="app-container home">

    <el-row >
      <el-col  >
        <el-card>
          <div slot="header" class="clearfix">
            <span>我的订单</span>
            <el-button style="padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="getList"></el-button>
            <el-button style="float: right; padding: 3px 0" type="text" @click="getToReLogin">重新登陆</el-button>
          </div>
          <li v-for="(order, index) in orderList" :key="index">
            <el-descriptions class="margin-top":column="columnSize" :ize="mini" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  京东号
                </template>
                {{order.jdAccount}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  闲鱼号
                </template>
                {{order.fishAccount}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                {{order.phoneNumber}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-date"></i>
                  预定时间
                </template>
                {{ parseTime(order.presetTime, '{y}-{m}-{d}') }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-date"></i>
                  登陆时间（如果超过20小时，请重新登陆）
                </template>
                {{ parseTime(order.cookieRecordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline"></i>
                  免息券类型
                </template>
                <dict-tag
                  :options="dict.type.mx_type"
                  :value="order.mxType"
                >
                </dict-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  登陆信息
                </template>
                <el-button style="margin-left: 3px" type="success" icon="el-icon-document-copy" circle v-clipboard:copy="order.cookie" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError"></el-button>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-more-outline"></i>
                  订单状态
                </template>
                <dict-tag
                  :options="dict.type.order_status"
                  :value="order.status"
                >
                </dict-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-more-outline"></i>
                  登陆状态
                </template>
                <dict-tag
                  :options="dict.type.login_status"
                  :value="order.loginStatus"
                >
                </dict-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-setting"></i>
                  操作
                </template>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-refresh"
                  @click="updateOrderLoginStatus(order)"
                >获取最新登陆状态</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-s-unfold"
                  @click="openCouponView(order)"
                >获取优惠券列表</el-button>
              </el-descriptions-item>
            </el-descriptions>
          </li>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
          <transition name="fade">
            <el-button icon="el-icon-top" circle v-if="true" class="scroll-to-top" @click="scrollToTop">
            </el-button>
          </transition>
<!--          <el-table v-loading="loading" :data="orderList">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品名称">
                    <span>{{ props.row.goodsName }}</span>
                  </el-form-item>
                  <el-form-item label="免息券类型">
                    <dict-tag
                      :options="dict.type.mx_type"
                      :value="props.row.mxType"
                    >
                    </dict-tag>
                  </el-form-item>
                  <el-form-item label="客户姓名">
                    <span>{{ props.row.customerName }}</span>
                  </el-form-item>
                  <el-form-item label="京东账号">
                    <span>{{ props.row.jdAccount }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center" prop="goodsName" />
            <el-table-column label="预定抢购时间" align="center" prop="presetTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.presetTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            &lt;!&ndash;      <el-table-column label="京东账号" align="center" prop="jdAccount" />&ndash;&gt;
            <el-table-column label="用户cookie" align="center" prop="cookie" width="180">
              <template slot-scope="scope">
                <el-popover
                  placement="top-start"
                  title="用户cookie"
                  width="500"
                  trigger="hover"
                  :content="scope.row.cookie">
                  <p class="table2" slot="reference">
                    {{scope.row.cookie}}
                  </p>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="cookie登记时间" align="center" prop="cookieRecordTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.cookieRecordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="咸鱼账号" align="center" prop="fishAccount" />
            <el-table-column label="客户姓名" align="center" prop="customerName" />
            <el-table-column label="免息券类型" align="center" prop="mxType" width="130">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.mx_type"
                  :value="scope.row.mxType"
                >
                </dict-tag>
              </template>
            </el-table-column>
            &lt;!&ndash;      <el-table-column label="用户id" align="center" prop="createUserId" />
                  <el-table-column label="单件商品原价" align="center" prop="goodsOriginalPrice" />
                  <el-table-column label="单件商品现价" align="center" prop="goodsNowPrice" />
                  <el-table-column label="商品数量" align="center" prop="goodsAmount" />
                  <el-table-column label="订单总价" align="center" prop="orderPrice" />
                  <el-table-column label="返现" align="center" prop="cashback" />
                  <el-table-column label="订单实际收入" align="center" prop="realIncome" />&ndash;&gt;
            <el-table-column label="订单状态" align="center" prop="status" fixed="right">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_status"
                  :value="scope.row.status"
                >
                </dict-tag>
              </template>
            </el-table-column>
            <el-table-column label="登陆状态" align="center" prop="loginStatus" fixed="right">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.login_status"
                  :value="scope.row.loginStatus"
                >
                </dict-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-refresh"
                  @click="updateOrderLoginStatus(scope.row)"
                >获取最新登陆状态</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-s-unfold"
                  @click="openCouponView(scope.row)"
                >获取优惠券列表</el-button>
              </template>
            </el-table-column>
          </el-table>-->
        </el-card>

      </el-col>
    </el-row>
    <el-divider />
<!-- 优惠券列表-->
    <el-dialog title="优惠券信息" :visible.sync="open" width="80%" append-to-body :before-close="close" :close-on-click-modal="false">

        <div>
          <ul class="coupon-list">
            <li v-for="(coupon, index) in couponList" :key="index">
              <div class="name">{{ coupon.scope }}</div>
              <div class="description">{{ coupon.couponFaceDescription }}</div>
              <div class="date">{{ coupon.withAvailable}} {{ coupon.startAndEndTime }}</div>
              <div class="discount">{{ coupon.faceValue}}</div>
            </li>
          </ul>
        </div>
      <div slot="footer" class="text-center">
        <el-button @click="close">关  闭</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCouponList, getOrderListByUser, listOrder, updateOrderLoginStatus } from '@/api/mx/order'

export default {
  name: "Index",
  dicts:['login_status','order_status','mx_type'],
  data() {
    return {
      // 版本号
      version: "3.8.5",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // mx订单表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        goodsName: null,
        presetTime: null,
        jdAccount: null,
        cookie: null,
        cookieRecordTime: null,
        fishAccount: null,
        customerName: null,
        address: null,
        phoneNumber: null,
        mxType: null,
        status: null,
        createUserId: null,
        goodsOriginalPrice: null,
        goodsNowPrice: null,
        goodsAmount: null,
        orderPrice: null,
        cashback: null,
        realIncome: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        createTime: [
          { required: true, message: "下单时间不能为空", trigger: "blur" }
        ],
      },
      spanWidth:20,
      couponList:null,
      isMobile: false,
      columnSize:1,
      showButton: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  created() {
    this.getList();
    this.isMobileInit();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    /** 查询mx订单列表 */
    getList() {
      this.loading = true;
      getOrderListByUser(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      });
    },
    updateOrderLoginStatus(row){
      updateOrderLoginStatus(row).then(response => {
        if (response.code === 200) {
          this.$message.success("获取成功")
          this.getList();
        }
      });
    },
    /**
     * 去重新登陆
     */
    getToReLogin(){
      this.$router.push('/mx/loginJd');
    },
    /**
     * 查看免息券
     */
    openCouponView(row){
      getCouponList(row).then(res=>{
        if (res.code === 200) {
          this.open=true
          this.couponList=res.data
        }
      }).catch()

    },
    close(){
      this.open = false
      this.couponList = null
    },
    /**
     * 判断是不是手机
     * @returns {RegExpMatchArray}
     */
    isMobileInit()  {
      const userAgent = navigator.userAgent.toLowerCase()
      const mobileKeywords = ['iphone', 'android', 'windows phone']
      this.isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword))
      if (this.isMobile) {
        this.columnSize = 1
      } else {
        this.columnSize = 3
      }
    },
    /** 复制情况 **/
    onCopySuccess(){
      this.$message.success('复制成功')
    },
    onCopyError(){
      this.$message.error('复制失败')
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth" // 平滑滚动
      });
    },
    handleScroll() {
      if (window.pageYOffset > 200) {
        this.showButton = true;
      } else {
        this.showButton = false;
      }
    },
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

 .table2  {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 30%;
}

/*优惠券css*/
.coupon-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.coupon-list li {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  height: 120px;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  overflow: hidden;
}

.name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.description {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.date {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.discount {
  font-size: 20px;
  font-weight: bold;
  color: #ff6b6b;
  margin-top: 5px;
}
/*悬浮按钮样式*/
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  background-color: #5f88f5; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
}
.scroll-to-top:hover {
  background-color: #252626; /* 鼠标悬停时的按钮背景颜色 */
}
.scroll-to-top i {
  margin-right: 5px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

